<template>
	<view class="container">
		<scroll-view scroll-y="true" class="menu" scroll-with-animation="true">
			<view class="menu-item" 
			:class="menuItemActive  === index ? 'menu-item--active' : ''" 
			v-for="(item, index) in menu" :key="index" 
			@tap="clickMenuItem(index)">
				{{ item.txt }}
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="main" scroll-with-animation="true" @scroll="mainScroll">
			<view class="main-part" :id="index" v-for="(item,index) in content" :key="index">
				<view class="main-part-caption">
					{{ item.caption }}
				</view>
				<view style="display: flex;flex-wrap: wrap;">
					<view class="main-part-item" v-for="(item,index) in item.list" :key="index"
					@tap="clickItem">
						<view class="main-part-item-img">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="main-part-item-txt">
							{{ item.txt }}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data () {
		return {
			menuItemActive: 0,
			menu: [
				{
					txt: '测试测试',
					img: '../../static/langwen/item.png'
				},
				{
					txt: '测试测试',
					img: '../../static/langwen/item.png'
				}
			],
			content: [
				{
					caption: '测试测试测试测试测试测试',
					list: [
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						}
					]
				},
				{
					caption: '测试测试测试测试测试测试',
					list: [
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						}
					]
				},
				{
					caption: '测试测试测试测试测试测试',
					list: [
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						},
						{
							img: '../../static/langwen/item.png',
							txt: '测试测试测试测试测试测试测试测试'
						}
					]
				}
			]
		}
	},
	methods: {
		clickMenuItem (index) {
			this.menuItemActive = index;
		},
		clickItem () {
			uni.navigateTo({
				url: '/pages/langwen/category2'
			})
		},
		mainScroll() {
			// const query = uni.createSelectorQuery().in(this);
			// query.selectAll('.main-part').boundingClientRect(data => {
			//   var selected = data.filter(function(item) {
			// 	  return item.top <= 0;
			//   });
			//   var length = selected.length - 1;
			//   this.menuItemActive = Number(selected[length].id);
			// }).exec();
		}
	}
}
</script>

<style lang="less">
page,
.container {
	height: 100%;
	background: #F5F5F5;
}

.container {
	display: flex;
	flex-direction: row;
}

.menu {
	flex-basis: 192rpx;
	min-width: 192rpx;
}

.menu-item {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #777777;
}

.menu-item--active {
	position: relative;
	background: #FFFFFF;
	font-size:28rpx;
	font-weight:500;
	color: #5AC2FF;
	&::after {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 32rpx;
		background: #5AC2FF;
	}
}

.main {
	flex-grow: 1;
}

.main-part {
	background: #FFFFFF;
	padding: 40rpx 18rpx 30rpx 18rpx;
	margin-bottom: 20rpx;
}

.main-part-caption {
	font-size:24rpx;
	font-weight:500;
	color:rgba(51,51,51,1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.main-part-item {
	width: 33.3%;
	margin-top: 30rpx;
}

.main-part-item-img {
	width:80rpx;
	height:98rpx;
	margin: 0 auto;
}

.main-part-item-txt {
	margin-top: 22rpx;
	text-align: center;
	font-size:22rpx;
	font-weight:400;
	color:rgba(51,51,51,1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
